<template>
    <div style="background-color: #fcf3f1;min-height: 100%">
        <el-menu :default-active="activePath"
                 style="box-shadow: 0 2px 4px #f3a683"
                 :router="true"
                 active-text-color="#e15f41"
                 text-color="#303952"
                 mode="horizontal" @select="handleSelect">
            <el-menu-item  @click="ToHome">
                <img class="img_logo" src="../../assets/img/moer.jpg" alt="Moer_logo">
                <span style="color: #0a3d62;margin-left: 10px;">摩尔贴帖</span>
            </el-menu-item>
            <el-menu-item index="Home" @click="saveNavState('Home')">
                <i class="img_icon el-icon-s-flag"></i>
                广场
            </el-menu-item>
            <el-menu-item index="Ask" @click="saveNavState('Ask')">
                <i class="img_icon el-icon-position"></i>
                提问区
            </el-menu-item>
            <el-menu-item index="MyAll" @click="saveNavState('MyAll')">
                <i class="img_icon el-icon-document"></i>
                我的
            </el-menu-item>
            <el-menu-item index="Static" @click="saveNavState('Static')">
                <i class="img_icon el-icon-s-tools"></i>
                数据
            </el-menu-item>
            <!--            跳转去登陆-->
            <el-menu-item v-if="IsLogin" @click="ToLogin" class="nav_left">
                <i class="img_icon el-icon-s-custom">{{this.nickname}}</i>
                <span style="margin-left: 30px">登录</span>
            </el-menu-item>
            <el-submenu index=""  v-else  class="nav_left">
                <template slot="title">
                    <i class="img_icon el-icon-s-custom"></i>
                    <span >{{this.nickname}}，欢迎</span>
                </template>
                <el-menu-item @click="ToMy">
                    <i class="img_icon  el-icon-user-solid"></i>
                    个人中心
                </el-menu-item>
                <el-menu-item @click="ToExit" index="2-3">
                    <i class="img_icon  el-icon-error"></i>
                    退出登录
                </el-menu-item>
            </el-submenu>
            <el-menu-item>


            </el-menu-item>
        </el-menu>
        <!--      下面内容主体-->
        <div style="width: 100%;">
            <!--        路由占位符-->
            <router-view></router-view>
        </div>

    </div>
</template>

<script>
    export default {
        name: "Main",
        data(){
            return{
                activePath: '',
                IsLogin: localStorage.getItem('nickname') ? false:true,
                nickname: localStorage.getItem('nickname') ? localStorage.getItem('nickname') :'游客'
            }
        },
        created() {
            this.activePath = window.sessionStorage.getItem('activePath') ? window.sessionStorage.getItem('activePath') : 'Home'
        },
        methods:{
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            //    跳转到登录页面
            ToLogin(){
                this.$router.push('/Login')
            },
            //    退出
            ToExit(){
                window.sessionStorage.clear()
                localStorage.clear()
                this.$router.push('/Login')
            },
            ToMy(){
                this.$router.push('/user/My')
            },
            // 保存链接的激活状态
            ToHome(){
                this.$router.push('/user/Home')
                this.saveNavState('Home')
            },
            saveNavState (activePath) {
                // console.log(window.sessionStorage.getItem('activePath'))
                if (window.sessionStorage.getItem('flag') === 'false'){
                    // window.sessionStorage.setItem('activePath', 'Home')
                    // console.log(window.sessionStorage.getItem('activePath'))
                    this.activePath = window.sessionStorage.getItem('activePath')
                }
                else {
                    window.sessionStorage.setItem('activePath', activePath)
                    this.activePath = window.sessionStorage.getItem('activePath')
                }
            },

        }
    }
</script>

<style scoped>
    .img_logo{
        width: 32px;
        height:28px;
    }
    .img_icon{
        vertical-align: middle;
        font-size: 14px !important;
        height: 14px !important;
        width: 14px !important;
        margin-right: 8px;
    }
    .nav_left{
        float: right !important;
        margin-right: 20px;
    }

</style>
